Decorator

同一個 component 有多個 decorator 時，由下往上執行（bottom-up）
Class 內部 decorator 會依序執行，然後執行 class decorator

@classDecorator1
@classDecorator2('test') // 要執行 classDecorator2 才能拿到裡面回傳的 function
class Student {
  @propertyDecorator
  name: string

  constructor(name: string) {
    this.name = name
  }

  @methodDecorator
  getName(): string {
    return this.name
  }

  calculateNameLength(@parameterDecorator num: number): number {
    return this.name.length * num
  }
}

const student = new Student('Sam')
console.log(student.getName())

class decorator 寫法：(target: any) => void

function classDecorator1(target: any) {
  console.log('classDecorator1')
}

// 回傳一個滿足 class decorator 的 function
function classDecorator2(tag: string) {
  return function (target: any) {
    console.log(tag)
    console.log('classDecorator2')
  }
}

method decorator 寫法：(target: any, propertyKey: string, descriptor: PropertyDescriptor) => void

function methodDecorator(
  target: any,
  propertyKey: string,
  descriptor: PropertyDescriptor
) {
  // 取出原本的方法
  const originalMethod = descriptor.value

  // 讓方法指向裝飾過的新方法
  descriptor.value = function () {
    const name = originalMethod.call(this)

    return `My name is ${name}`
  }
}

parameter decorator 寫法：(target: any, propertyKey: string, parameterIndex: number) => void

function parameterDecorator(target: any, propertyKey: string, index: number) {
  console.log('parameterDecorator')
}

property decorator 寫法：(target: any, propertyKey: string) => void

function propertyDecorator(target: any, propertyKey: string) {
  console.log('propertyDecorator')
}

Reference

TypeScript 學習之路─第十八章：裝飾器(Decorator)

Decorator

Reference​

Reference